<template>
  <div class="ranking-container">
    <el-card class="ranking-card">
      <template #header>
        <div class="card-header">
          <span>积分排行榜</span>
          <el-button type="primary" @click="fetchRankingList">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </template>
      
      <div class="ranking-list">
        <div 
          v-for="item in rankingList" 
          :key="item.rank"
          class="ranking-item"
          :class="{ 
            'top-1': item.rank === 1,
            'top-2': item.rank === 2,
            'top-3': item.rank === 3
          }"
        >
          <div class="rank-number">
            <template v-if="item.rank <= 3">
              <el-icon :size="24" :color="getRankColor(item.rank)">
                <Trophy />
              </el-icon>
            </template>
            <template v-else>
              {{ item.rank }}
            </template>
          </div>
          
          <el-avatar :size="40" :src="item.avatar">
            {{ item.nickname?.[0] || '用户' }}
          </el-avatar>
          
          <div class="user-info">
            <div class="nickname">{{ item.nickname }}</div>
            <div class="credit">积分：{{ item.credit }}</div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Trophy, Refresh } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const rankingList = ref([])

const getRankColor = (rank) => {
  switch (rank) {
    case 1: return '#FFD700'  // 金色
    case 2: return '#C0C0C0'  // 银色
    case 3: return '#CD7F32'  // 铜色
    default: return '#909399'
  }
}

const fetchRankingList = async () => {
  try {
    const response = await axios.get('http://localhost:8080/api/v1/medical/credit/query_user_credit_rank')
    if (response.data.code === '0000') {
      rankingList.value = response.data.data
    }
  } catch (error) {
    ElMessage.error('获取排行榜数据失败')
  }
}

onMounted(() => {
  fetchRankingList()
})
</script>

<style lang="scss" scoped>
.ranking-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  
  .ranking-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      span {
        font-size: 18px;
        font-weight: bold;
      }
    }
    
    .ranking-list {
      .ranking-item {
        display: flex;
        align-items: center;
        padding: 16px;
        border-radius: 8px;
        margin-bottom: 12px;
        background: #f5f7fa;
        transition: all 0.3s;
        
        &:hover {
          transform: translateX(5px);
          background: #ecf5ff;
        }
        
        &.top-1 {
          background: #fff8e6;
        }
        
        &.top-2 {
          background: #f5f7fa;
        }
        
        &.top-3 {
          background: #fef0f0;
        }
        
        .rank-number {
          width: 40px;
          text-align: center;
          font-size: 20px;
          font-weight: bold;
          color: #909399;
        }
        
        .user-info {
          margin-left: 16px;
          flex: 1;
          
          .nickname {
            font-size: 16px;
            color: #303133;
            margin-bottom: 4px;
          }
          
          .credit {
            font-size: 14px;
            color: #909399;
          }
        }
      }
    }
  }
}

// 响应式设计
@media screen and (max-width: 768px) {
  .ranking-container {
    padding: 10px;
    
    .ranking-card {
      .ranking-list {
        .ranking-item {
          padding: 12px;
          
          .rank-number {
            width: 30px;
            font-size: 16px;
          }
          
          .el-avatar {
            width: 32px;
            height: 32px;
          }
          
          .user-info {
            .nickname {
              font-size: 14px;
            }
            
            .credit {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
</style> 